<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

		<title>商品页面</title>

		<link href="../AmazeUI-2.4.2/assets/css/admin.css" rel="stylesheet" type="text/css" />
		<link href="../AmazeUI-2.4.2/assets/css/amazeui.css" rel="stylesheet" type="text/css" />
		<link href="../basic/css/demo.css" rel="stylesheet" type="text/css" />
		<link type="text/css" href="../css/optstyle.css" rel="stylesheet" />
		<link type="text/css" href="../css/style.css" rel="stylesheet" />

		<script type="text/javascript" src="../basic/js/jquery-1.7.min.js"></script>
		<script type="text/javascript" src="../basic/js/quick_links.js"></script>

		<script type="text/javascript" src="../AmazeUI-2.4.2/assets/js/amazeui.js"></script>
		<script type="text/javascript" src="../js/jquery.imagezoom.min.js"></script>
		<script type="text/javascript" src="../js/jquery.flexslider.js"></script>
		<script type="text/javascript" src="../js/list.js"></script>

	</head>

	<body>

		<!--顶部导航条 -->
		<div class="am-container header">
			<ul class="message-l">
				<div class="topMessage">
					<div class="menu-hd">
						<a href="#" target="_top" class="h">亲，请登录</a>
						<a href="#" target="_top">免费注册</a>
					</div>
				</div>
			</ul>
			<ul class="message-r">
				<div class="topMessage home">
					<div class="menu-hd">
						<a href="#" target="_top" class="h">商城首页</a>
					</div>
				</div>
				<div class="topMessage my-shangcheng">
					<div class="menu-hd MyShangcheng">
						<a href="#" target="_top"><i class="am-icon-user am-icon-fw"></i>个人中心</a>
					</div>
				</div>
				<!--<div class="topMessage mini-cart">
					<div class="menu-hd">
						<a id="mc-menu-hd" href="#" target="_top"><i class="am-icon-shopping-cart  am-icon-fw"></i><span>购物车</span><strong id="J_MiniCartNum" class="h">0</strong></a>
					</div>
				</div>
				<div class="topMessage favorite">
					<div class="menu-hd">
						<a href="#" target="_top"><i class="am-icon-heart am-icon-fw"></i><span>收藏夹</span></a>
					</div>
				</div>-->
				
			</ul>
			</div>

			<!--悬浮搜索框-->
			<div class="nav white">
				<div class="logo"><img src="../images/logo.png" /></div>
				<div class="logoBig">
					<li><img src="../images/logobig.png" /></li>
				</div>
			</div>

			<div class="clear"></div>

			<ol class="am-breadcrumb am-breadcrumb-slash">
				<li>
					<a href="#">首页</a>
				</li>
				<li class="am-active">商品内容</li>
			</ol>
			<script type="text/javascript">
				$(function() {});
				$(window).load(function() {
					$('.flexslider').flexslider({
						animation: "slide",
						start: function(slider) {
							$('body').removeClass('loading');
						}
					});
				});
			</script>
			

			<!--放大镜-->
			<div class="item-inform">
				<div class="clearfixLeft" id="clearcontent">

					<div class="box">
						<script type="text/javascript">
							$(document).ready(function() {
								$(".jqzoom").imagezoom();
								$("#thumblist li a").click(function() {
									$(this).parents("li").addClass("tb-selected").siblings().removeClass("tb-selected");
									$(".jqzoom").attr('src', $(this).find("img").attr("mid"));
									$(".jqzoom").attr('rel', $(this).find("img").attr("big"));
								});
							});
						</script>

						<div class="tb-booth tb-pic tb-s310">
							<a href=""><img id="firstImg" src="" alt="细节展示放大镜特效" rel="" class="jqzoom" /></a>
						</div>
						<ul class="tb-thumb" id="thumblist">
							<li class="tb-selected">
								<div class="tb-pic tb-s40">
									<a href="#"><img id="img1" src=""  mid="" big=""></a>
								</div>
							</li>
							<li>
								<div class="tb-pic tb-s40">
									<a href="#"><img id="img2"  src="" mid="" big=""></a>
								</div>
							</li>
							<li>
								<div class="tb-pic tb-s40">
									<a href="#"><img  id="img3"  src="" mid="" big=""></a>
								</div>
							</li>
						</ul>
					</div>

					<div class="clear"></div>
				</div>

				<div class="clearfixRight">

					<!--规格属性-->
					<!--名称-->
					<div class="tb-detail-hd">
						<h1 id="goodsname"></h1>
						<input type="text" id="goodsid" hidden="true"/>
					</div>
					<div class="tb-detail-list">
						<!--价格-->
						<div class="tb-detail-price" style="width: 550px;">
							<li class="price iteminfo_price">
								<dt style="font-size: 15px;">售价</dt>
								<dd><em>¥</em><b class="sys_item_price"></b> </dd>
							</li>
							<div class="clear"></div>
						</div>
						<div class="clear"></div>

						<!--销量-->
						<ul class="tm-ind-panel" style="width: 550px;">
							<li class="tm-ind-item tm-ind-sumCount canClick">
								<div class="tm-indcon"><span class="tm-label">库存</span><span class="tm-count" id="inventory">6015</span></div>
							</li>
							<li class="tm-ind-item tm-ind-sumCount canClick">
							</li>
						</ul>
						<div class="clear"></div>

						<!--各种规格-->
						<dl class="iteminfo_parameter sys_item_specpara">
							<dt class="theme-login"><div class="cart-title">可选规格<span class="am-icon-angle-right"></span></div></dt>
							<dd>
								<!--操作页面-->

								<div class="theme-popover-mask"></div>

								<div class="theme-popover">
									<div class="theme-span"></div>
									<div class="theme-poptit">
										<a href="javascript:;" title="关闭" class="close">×</a>
									</div>
									<div class="theme-popbod dform">
										<form class="theme-signin" name="loginform" action="" method="post">

											<div class="theme-signin-left">

												<div class="theme-options">
													<div class="cart-title number">数量</div>
													<dd>
														<input id="min" class="am-btn am-btn-default" name="" type="button" value="-" />
														<input id="text_box" name="" type="text" value="1" style="width:30px;" />
														<input id="add" class="am-btn am-btn-default" name="" type="button" value="+" />
													</dd>

												</div>
												<div class="clear"></div>

												<div class="btn-op">
													<div class="btn am-btn am-btn-warning">确认</div>
													<div class="btn close am-btn am-btn-warning">取消</div>
												</div>
											</div>
											<div class="theme-signin-right">
												<div class="img-info">
													<img src="../images/songzi.jpg" />
												</div>
												<div class="text-info">
													<span class="J_Price price-now">¥39.00</span>
													<span id="Stock" class="tb-hidden">库存<span class="stock">1000</span>件</span>
												</div>
											</div>

										</form>
									</div>
								</div>

							</dd>
						</dl>
						<div class="clear"></div>

					</div>

					<div class="pay">
						<div class="pay-opt">
							<a href="home.html"><span class="am-icon-home am-icon-fw">首页</span></a>
							<a><span class="am-icon-heart am-icon-fw">收藏</span></a>

						</div>
						<li>
							<div class="clearfix tb-btn tb-btn-buy theme-login">
								<a id="LikBuy" title="点此按钮到下一步确认购买信息" onclick="gotoPay()">立即购买</a>
							</div>
						</li>

					</div>

				</div>

				<div class="clear"></div>

			</div>
			<div class="clear"></div>
			<!-- introduce-->

			<div class="introduce">
				<div class="browse">
					<div class="mc">
					</div>
				</div>
				<div class="introduceMain">
					<div class="am-tabs" data-am-tabs>
						<ul class="am-avg-sm-3 am-tabs-nav am-nav am-nav-tabs" style="border-top: 2px solid #000000;">
							<li class="am-active" style="border-top: 0px">
								<a href="#">
									<span class="index-needs-dt-txt" style="color: #000000;">商品详情</span></a>
							</li>
						</ul>

						<div class="am-tabs-bd">

							<div class="am-tab-panel am-fade am-in am-active">
								<div class="details">
									<div class="twlistNews">
									</div>
								</div>
								<div class="clear"></div>
							</div>

						</div>
						<div class="clear"></div>
					</div>

				</div>

			</div>

			<div class="clear"></div>
		</div>

		</div>
		</div>
		<script>
			function getQueryStringByName(name) {
		        var result = location.search.match(new RegExp("[\?\&]" + name + "=([^\&]+)", "i"));
		        if (result == null || result.length < 1) {
		            return "";
		        }
		        return result[1];
		    }
			
			$(function(){
				/*根据url获取商品id*/
				var goodsid=getQueryStringByName("goodsid");
				
				/*根据商品id请求获取商品信息*/
				$.ajax({
					type:"get",
					url:"/goods/info/"+goodsid,
					async:true,
					success:function(result){
						$("#firstImg").attr("src",result.data.img1);
						$("#firstImg").attr("rel",result.data.img1);
						$("#img1").attr("src",result.data.img1);
						$("#img1").attr("mid",result.data.img1);
						$("#img1").attr("big",result.data.img1);
						$("#img2").attr("src",result.data.img2);
						$("#img2").attr("mid",result.data.img2);
						$("#img2").attr("big",result.data.img2);
						$("#img3").attr("src",result.data.img3);
						$("#img3").attr("mid",result.data.img3);
						$("#img3").attr("big",result.data.img3);
						$("#goodsname").text(result.data.goodsname);
						$(".sys_item_price").text(result.data.price);
						$("#inventory").text(result.data.inventory);
						$(".twlistNews").text(result.data.details);
						$("#goodsid").val(result.data.id);
					}
				});
			})
			
			function gotoPay(){
				var goodsid=$("#goodsid").val();
				var num=$("#text_box").val();
				window.location.href="/portal/home/pay.html?goodsid="
				+goodsid+"&num="+num;
			}
		</script>
	</body>

</html>